<script setup lang="ts">
import { ref } from 'vue'
import type { previewImgType, colsType, rowsType } from './type'

const imgList = ref<previewImgType[]>([
  { id: '1', path: './images/comp/scene/1.png' },
  { id: '2', path: './images/comp/scene/2.png' },
  { id: '3', path: './images/comp/scene/3.png' },
  { id: '4', path: './images/comp/scene/4.png' }
])

const apiCols: colsType[] = [
  { title: '参数', dataIndex: 'param', width: 200 },
  { title: '类型', dataIndex: 'type', width: 150 },
  { title: '默认值', dataIndex: 'default', width: 100 },
  { title: '必填', dataIndex: 'required', width: 80 },
  { title: '说明', dataIndex: 'statement', ellipsis: true }
]
const apiRows: rowsType[] = [
  {
    key: '1',
    param: 'partId',
    statement: '分部ID',
    type: 'string',
    default: '-',
    required: '否'
  },
  {
    key: '2',
    param: 'shopName',
    statement: '门店标识',
    type: 'string',
    default: '-',
    required: '否'
  },
  {
    key: '3',
    param: 'shopId',
    statement: '门店ID',
    type: 'string',
    default: '-',
    required: '否'
  },
  {
    key: '4',
    param: 'value',
    statement: '支付金额',
    type: 'number | string',
    default: '0',
    required: '否'
  },
  {
    key: '5',
    param: 'forbid',
    statement: '禁止支付渠道',
    type: 'number | string',
    default: '0',
    required: '否'
  },
  {
    key: '6',
    param: 'sceneValue',
    statement: '支付场景值',
    type: 'number | string',
    default: '0',
    required: '否'
  },
  {
    key: '7',
    param: 'sourceData',
    statement: '缓存支付场景商户',
    type: 'Object',
    default: 'null',
    required: '否'
  }
]
</script>

<template>
  <main class="main-wrap" v-hl>
    <div class="dev-wrap">
      <div class="doc-wrap">
        <div class="doc-sub">1、组件简介</div>
        <div class="doc-text">
          <div class="text">1.1 所属项目 - 会员小程序</div>
        </div>
        <div class="doc-text">
          <div class="text">1.2 路径 - /components/pay-scene/pay-scene.vue</div>
        </div>
        <div class="doc-text">
          <div class="text">1.3 功能 - 支付前获取支付场景值</div>
        </div>
        <div class="doc-text">
          <div class="text">1.4 组件预览</div>
          <div class="image flex-h-sc">
            <a-image-preview-group>
              <div class="img" v-for="(item, inx) in imgList" :key="item.id">
                <a-image class="img" :width="100"  :src="item.path" />
              </div>
            </a-image-preview-group>
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">2、使用方法</div>
        <div class="doc-text">
          <div class="text">该组件属于easycom组件无需引入和注册可直接在templete中使用</div>
          <div class="text">
            <pre><code class="vue">&lt;pay-scene :value="0" :sceneValue="250" :partId="id" :shopId="sid" :forbid="0" @close="close" v-if="show"&gt;&lt;/pay-scene&gt;</code></pre>
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">3、关联接口</div>
        <div class="doc-text">
          <div class="text">/accountWallet/GetWalletBalanceAsync - 获取储值账号数据</div>
          <div class="text">
            /accountWalletChargeRule/GetEnabledChargeRuleContentAsync - 获取充值规则
          </div>
          <div class="text">/payScene/GetPaySceneAsync - 获取支付场景商户</div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">4、API</div>
        <div class="doc-tab">
          <div class="tab">
            <a-table
              :columns="apiCols"
              :data-source="apiRows"
              bordered
              :pagination="false"
              size="small"
            ></a-table>
          </div>
          <div class="text">
            注意：以上表格字段均为选传字段，当sourceData有值时可不传任何字段，shopId和shopName传一即可
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">5、方法</div>
        <div class="doc-text">
          <div class="doc-sub">close（关闭窗口回调）</div>
          <div class="text">
            <pre><code class="vue">interface dataType {
    payChannel:number;
    payChannelName:string;
    feeRate:number;
    accountWalletTypeId:string;
    accountWalletTypeName:string;
    accountWalletTypeDisplayName:string;
    merchantAccountWalletId?:string;
}
type close = (data?:dataType) => void</code></pre>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped lang="scss">
.main-wrap {
  @include size(100%, 100%);
  padding: 24px;
  overflow-y: auto;
  background: #fff;
}
.dev-wrap {
  .dev-t1 {
    @include font(14px, 1.4, #333);
    font-weight: bold;
    margin-bottom: 15px;
  }
  .doc-wrap {
    padding-left: 5px;
    margin-bottom: 15px;
    &:last-of-type {
      margin-bottom: 0;
    }
    .doc-sub {
      @include font(13px, 1.4, #333);
      font-weight: bold;
      margin-bottom: 10px;
    }
    .doc-text,
    .doc-tab {
      @include font(13px, 1.4, #333);
      padding-left: 5px;
      margin-bottom: 10px;
      &:last-of-type {
        margin-bottom: 0;
      }
      .tab {
        margin-bottom: 10px;
      }
      .text {
        @include font(13px, 1.4, #333);
        margin-bottom: 8px;
        padding-left: 5px;
        &:last-of-type {
          margin-bottom: 0;
        }
        .text {
          @include font(13px, 1.4, #333);
          margin: 12px 0 6px 0;
        }
        pre {
          display: block;
          margin: 0 0 4px 0;
          code {
            display: block;
            padding: 10px;
            background: #282c34;
            color: #abb2bf;
          }
        }
      }
      .image {
        @include size(100%, 100%);
        .img {
          max-width: 150px;
          margin-right: 20px;
          &:last-of-type {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
